<template>
	<div class="list">
		<div class="weui_cells_title" align="center">特约授权施工中心一览</div>
		<div class="list-list">
			<div class="list-list-flex" @click="urlClick(item.id)" v-for="(item,index) in list">
				<div class="list-list-flex-left">
					<div>{{item.serialnumber}}</div>
					<div>{{item.name}}</div>
				</div>
				<img  src="../../assets/right.png"/>
			</div>
			
			
			
		</div>
		<div class="list-list-button">
			<div @click="pageClick(1)">上一页</div>
			<div @click="pageClick(2)">下一页</div>
		</div>
	</div>
</template>

<script>
	export default {
	    data() {
			return {
				list : [],
				page  : 1,
				count : 0,
				city_name : '',
				area_name : '',
				classify_name : '',
				name      : '',
				province_name : '',
				classify_id : ''
			}
	    },
		created() {
			var  query  = this.$route.query;
			this.city_name  = query.city_name;
			this.area_name  = query.area_name;
			this.classify_name  = query.classify_name;
			this.name  = query.name;
			this.province_name  = query.province_name;
			this.classify_id  = query.classify_id;
			
			this.all();
		},
		methods:{
			urlClick(e){
				this.$router.push('/shopdetails?id='+e);
			},
			pageClick(e){
				if(e==1 && this.page > 1){
					this.page --;
					this.all();
				}
				if(e==2 ){
					var limit  = this.page * 10;
					if(limit < this.count){
						this.page ++;
						this.all();
					}
					
				}
			},
			all(){
				let that = this;
				var where = {
					'city_name' : that.city_name,
					'area_name' : that.area_name,
					'classify_name' : that.classify_name,
					'name' : that.name,
					'province_name' : that.province_name,
					'classify_id' : that.classify_id,
					'page' : that.page
					
				}
				that.$http('get','/api/index/shoplist',where) .then(function (res) {
					that.list = res.data.list;
					that.count  = res.data.count;
				});
			}
		},
	}
</script>

<style lang="less">
	.list {
		width: 100%;
		height: 100%;
		background-color:#fbf9fe;
	}
	.weui_cells_title {
		background-color: #f5f5f5; 
		text-align: center;
		height: 40px;
		line-height: 40px;
		color: #888;
		font-size: 15px;
	}
	.list-list {
		background-color: #ffff;
		.list-list-flex {
			display: flex;
			align-items: center;
			padding: 10px;
			border-bottom: 1px solid #fbf9fe;
			img {
				width: 30px;
				height: 30px;
				margin-left: auto;
				
			}
		}
		
	}
	.list-list-button {
		margin-top: 20px;
		display: flex;
		justify-content: center;
		div {
			color: #ffff;
			line-height: 36px;
			text-align: center;
			margin-left: 10px;
			margin-right: 10px;
			width: 80px;
			border-radius: 10px;
			background: red;
			background-color: #04BE02;
		}
	}
</style>